<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>消息盒子</title>
    <link rel="stylesheet" href="../../../layui.css">
    <style>
    .layim-msgbox {
        margin: 15px;
    }

    .layim-msgbox li {
        position: relative;
        margin-bottom: 10px;
        padding: 0 130px 10px 60px;
        padding-bottom: 10px;
        line-height: 22px;
        border-bottom: 1px dotted #e2e2e2;
    }

    .layim-msgbox .layim-msgbox-tips {
        margin: 0;
        padding: 10px 0;
        border: none;
        text-align: center;
        color: #999;
    }

    .layim-msgbox .layim-msgbox-system {
        padding: 0 10px 10px 10px;
    }

    .layim-msgbox li p span {
        padding-left: 5px;
        color: #999;
    }

    .layim-msgbox li p em {
        font-style: normal;
        color: #FF5722;
    }

    .layim-msgbox-avatar {
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        height: 50px;
    }

    .layim-msgbox-user {
        padding-top: 5px;
    }

    .layim-msgbox-content {
        margin-top: 3px;
    }

    .layim-msgbox .layui-btn-small {
        padding: 0 15px;
        margin-left: 5px;
    }

    .layim-msgbox-btn {
        position: absolute;
        right: 0;
        top: 12px;
        color: #999;
    }
    </style>
</head>

<body>
    <ul class="layim-msgbox" id="LAY_view"></ul>
    <textarea title="消息模版" id="LAY_tpl" style="display:none;">
        {{# layui.each(d.data, function(index, item){ if(item.from){ }}
        <li data-uid="{{ item.from }}" data-fromGroup="{{ item.from_group }}">
            <a href="/u/{{ item.from }}/" target="_blank">
        <img src="{{ item.user.avatar }}" class="layui-circle layim-msgbox-avatar">
      </a>
            <p class="layim-msgbox-user">
                <a href="/u/{{ item.from }}/" target="_blank">{{ item.user.username||'' }}</a>
                <span>{{ item.time }}</span>
            </p>
            <p class="layim-msgbox-content">
                {{ item.content }}
                <span>{{ item.remark ? '附言: '+item.remark : '' }}</span>
            </p>
            <p class="layim-msgbox-btn">
                <button class="layui-btn layui-btn-small" data-type="agree">同意</button>
                <button class="layui-btn layui-btn-small layui-btn-primary" data-type="refuse">拒绝</button>
            </p>
        </li>
        {{# } else { }}
        <li class="layim-msgbox-system">
            <p><em>系统：</em>{{ item.content }}<span>{{ item.time }}</span></p>
        </li>
        {{# } }); }}
    </textarea>
    <script src="../../../../layui.js"></script>
    <script>
    layui.use(['laytpl', 'flow'], function() {
        var layim = layui.layim,
            layer = layui.layer,
            laytpl = layui.laytpl,
            $ = layui.jquery,
            flow = layui.flow;

        var cache = {}; //用于临时记录请求到的数据

        init();

        function getQueryString(name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return unescape(r[2]);
            }
            return null;
        };

        function init() {
            $.ajaxSetup({
                headers: {
                    'access-token': getQueryString("tokenId")
                }
            });
        };
        //请求消息
        var renderMsg = function(page, callback) {
            $.ajax({
                    url: '/ws/im/friend/verify',
                    type: 'GET'
                })
                .done(function(res) {
                    res.data = (res.data && res.data.length) ? resToData(res.data) : '';
                    //记录来源用户信息
                    layui.each(res.data, function(index, item) {
                        cache[item.from] = item.user;
                    });
                    callback && callback(res.data, res.pages);
                })
                .fail(function(res) {
                    console.log("error");
                });

        };

        function resToData(data) {
            var l = data.length,
                i,
                d = [];
            while (l--) {
                i = {
                    "id": data[l].id,
                    "content": data[l] && dataToTip(data[l]),
                    "uid": data[l].applicant,
                    "from": (data[l].status != 1) ? null : data[l].applicant,
                    "from_group": 0,
                    "type": 1,
                    "remark": data[l].verifyInfo,
                    "href": null,
                    "read": 1,
                    "time": parent.layui.data.date(new Date(data[l].createDate).getTime()),
                    "user": {
                        "id": data[l].applicant,
                        "avatar": data[l].avatar || layui.cache.dir + "css/modules/layim/img/default.png",
                        "username": data[l].applicant || '佚名',
                        "sign": null
                    }
                }
                d.push(i);
            }
            return d;
        };

        function dataToTip(d) {
            var mine = parent.layui.layim.cache().mine;
            if (d.status == 1) {
                return '申请添加你为好友';
            } else if (d.status == 2) {
                if (d.applicat == mine.id) {
                    return d.target + '已经同意你的好友申请'
                } else {
                    return '您已经同意了 ' + d.applicant + ' 的好友申请'
                }
            } else {
                if (d.applicat == mine.id) {
                    return d.target + '拒绝了你的好友申请'
                } else {
                    return '您拒绝了 ' + d.applicant + ' 的好友申请'
                }
            }
        }


        //消息信息流
        flow.load({
            elem: '#LAY_view',
            isAuto: false,
            end: '<li class="layim-msgbox-tips">暂无更多新消息</li>',
            done: function(page, next) { //加载下一页
                renderMsg(page, function(data, pages) {
                    var html = laytpl(LAY_tpl.value).render({
                        data: data,
                        page: page
                    });
                    next(html, page < pages);
                });
            }
        });

        //操作
        var active = {
            //同意
            agree: function(othis) {
                var li = othis.parents('li'),
                    uid = li.data('uid'),
                    from_group = li.data('fromGroup'),
                    user = cache[uid];
                //选择分组
                parent.layui.layim.setFriendGroup({
                    type: 'friend',
                    username: user.username,
                    avatar: user.avatar,
                    group: parent.layui.layim.cache().friend,
                    submit: function(group, index) {
                        user.content = '同意';
                        parent.layui.layim.addFriend(user, function(code) {
                            if (code == 0) {
                                //将好友追加到主面板
                                parent.layui.layim.addList({
                                    type: 'friend',
                                    avatar: user.avatar,
                                    username: user.username,
                                    groupid: group,
                                    id: uid,
                                    sign: user.sign
                                });
                                othis.parent().html('已同意');
                            }
                            parent.layer.close(index);
                        });
                    }
                });
            },
            //拒绝
            refuse: function(othis) {
                var li = othis.parents('li'),
                    uid = li.data('uid'),
                    user = cache[uid];

                layer.confirm('确定拒绝吗？', function(index) {
                    user.content = null;
                    parent.layui.layim.addFriend(user, function(code) {
                        !code && othis.parent().html('<em>已拒绝</em>');
                        layer.close(index);
                    });
                });
            }
        };

        $('body').on('click', '.layui-btn', function() {
            var othis = $(this),
                type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
    });
    </script>
</body>

</html>